@charset "UTF-8";

// font family
$sansFont:"Helvetica Neue",Helvetica,Arial,sans-serif;
$serifFont:Georgia, "Times New Roman",Times,serif;
$wpFont:"Microsoft YaHei",sans-serif;
$bizFont:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
$fDefaultFamily : Roboto,'Droid Sans','Helvetica Neue','Droid Sans Fallback','Heiti SC',sans-self;

$mbzFont:'Corporate', Arial;
$globalBoldFont:'DaimlerCAC-Bold';
$globalFont:$mbzFont;
$gutter:40px;

/*border color */
$globalBorderColor: #5d5d65;
$greyBorder : #f0f0f0;


/* Font Size */
$fXS : 1rem;
$fSM : 1.2rem;
$fMD : 1.4rem;
$fLG : 1.6rem;
$fXL : 2.2rem;

/* Font Color */
$fDefault   : #FFFFFF;  //plain white
$fPrimary   : #249fdf;
$fSecondary : #2689f8;
$fSuccess   : #47b85c;
$fWarning   : #f64a4a;
$fDanger    : #f9a123;
$fMuted     : #999999;
$fBlack     : #000;
$fBlue      : #01abee;



/* Background Color */
$bgDefault  : #000000;    //deep black
$bgPrimary  : #00adef;   //pure blue
$bgWhite    : #FFFFFF;   //plain white
$bgDeepGrey : #191919;   //深灰色
$bgGrey     : #141414;
$bgPureGrey : #313131;
/* Theme Color */
$theColor1 : #000000;  //deep black
$theColor2 : #FFFFFF;  //plain white
$theColor3 : #333333;  //gray
$globalThemeBlue :#2d78f4;
$globalThemeLightBlue :#00adef;

/* Spacing */
$spacing   : 1rem;
$spacingSM : 0.6rem;
$spacingLG : 1.5rem;
$spacingXLG : 2.5rem;


/* Extends */
%clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
    font-size: 0;
    clear: both;
  }
}
%fullpage {
  position: absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}
%abContent{
  content:'';
  display: block;
  position: absolute;
}
%resetContent{
  margin:0 #{-$gutter/40px*1rem};
}
/* Includes */
@mixin boxSizing($sizing) {
  -moz-box-sizing: $sizing;
  -webkit-box-sizing: $sizing;
  box-sizing: $sizing;
}

@mixin boxShadow($shadow) {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin borderRaduis($raduis) {
  -webkit-border-radius: $raduis;
  -moz-border-radius: $raduis;
  border-radius: $raduis;
}

@mixin borderTopRaduis($raduis) {
  border-top-right-radius: $raduis;
  border-top-left-radius: $raduis;
}

@mixin borderBottomRaduis($raduis) {
  border-bottom-left-radius: $raduis;
  border-bottom-right-radius: $raduis;
}

@mixin transition($transition) {
  -moz-transition: $transition;
  -webkit-transition: $transition;
  transition: $transition;
}

@mixin opacity($opacity) {  // 设置透明度
  opacity: $opacity;
  filter: alpha(opacity = $opacity * 100);
}

@mixin gridUnit($number) {  // 换算网格单元宽度
  width: $number / 12 * 100 + %;
}

// tapcolor
@mixin setTapColor($c:rgba(0,0,0,0)) {
    -webkit-tap-highlight-color: $c;
}

//user action
@mixin no_select() {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

//border one px
@mixin setTopLine($c: #C7C7C7) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100% ;
    height: 1px;
    border-top: 1px solid $c;
    color: $c;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

@mixin setBottomLine($c: #C7C7C7) {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid $c;
    color: $c;
    transform-origin: 0 100% ;
    transform: scaleY(0.5);
}

@mixin setLeftLine($c: #C7C7C7) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100% ;
    border-left: 1px solid $c;
    color: $c;
    transform-origin: 0 0;
    transform: scaleX(0.5);
}

@mixin setRightLine($c: #C7C7C7) {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100% ;
    border-right: 1px solid $c;
    color: $c;
    transform-origin: 100%  0;
    transform: scaleX(0.5);
}

@function torem($px){//$px为需要转换的字号
    //默认
    @return $px / 40px * 1rem; //40px为根字体大小
}

@function torem2($px1,$px2){//$px为需要转换的字号

    //两个值 如 margin:torem(top  bottom,left right)

    @if $px2{
        @return $px1 / 40px * 1rem  $px2 / 40px * 1rem   ; //40px为根字体大小
    }
}

@function torem3($px1,$px2,$px3){//$px为需要转换的字号

    //三个值 如 margin:torem(top  bottom,left right)

    @if $px3{
        @return $px1 / 40px * 1rem  $px2 / 40px * 1rem   $px3 / 40px * 1rem  ; //40px为根字体大小
    }
}


@function torem4($px1,$px2,$px3,$px4){//$px为需要转换的字号
    //四个值 如 margin:torem(top,right,bottom,left)
    @if $px4{
          @return $px1 / 40px * 1rem  $px2 / 40px * 1rem  $px3 / 40px * 1rem  $px4 / 40px * 1rem ; //40px为根字体大小
    }
}
@mixin tosize($width:0,$height:0){
    //rem width and height
    width:torem($width*1px);
    height:torem($height*1px);
}
//gradient渐变
//you can use like this
// @include linear-gradient(red, black);//从上到下 红到黑

// @include linear-gradient(to right, red 0%, black 100%);
//to right:从左到右的渐变
//to left:从右到左的渐变
//to bottom left:右上角到左下角的渐变
//to bottom right:左上角到右下角的渐变
//to top left:右下角到左上角的渐变
//to top right:左下角到右上角的渐变

// @include linear-gradient(0deg,red 0%,red 40%, black 100%);
// 角度渐变 逆时针 0度相当于从左到右渐变 90度相当于从下到上渐变 -90相当于从下到上渐变 180相当于从右到左

@mixin linear-gradient($direction, $color-stops...) {
  // Direction has been omitted and happens to be a color-stop
  @if is-direction($direction) == false {
    $color-stops: $direction, $color-stops;
    $direction: 180deg;
  }

  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

/// Test if `$value` is a valid direction
/// @param {*} $value - Value to test
/// @return {Bool}
@function is-direction($value) {
  $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));

  @return $is-keyword or $is-angle;
}

/// Convert a direction to legacy syntax
/// @param {Keyword | Angle} $value - Value to convert
/// @require {function} is-direction
/// @require {function} convert-angle
/// @throw Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.;
@function legacy-direction($value) {
  @if is-direction($value) == false {
    @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
  }

  $conversion-map: (
    to top          : bottom,
    to top right    : bottom left,
    to right top    : left bottom,
    to right        : left,
    to bottom right : top left,
    to right bottom : left top,
    to bottom       : top,
    to bottom left  : top right,
    to left bottom  : right top,
    to left         : right,
    to left top     : right bottom,
    to top left     : bottom right
  );

  @if map-has-key($conversion-map, $value) {
    @return map-get($conversion-map, $value);
  }

  @return 90deg - $value;
}

@mixin setTapColor($c:rgba(0,0,0,0)) {
    -webkit-tap-highlight-color: $c;
}
